<!-- 门店收益图 tooltip 与 revenue 的 tooltip 相同，此组件暂时不用 -->
<template>
  <div class="echarts-table">
    <div class="header">
      <div class="color-black flex font-medium text-xs mb-2">
        <div class="mr-3">{{ dataSource?.name }}</div>
        <div>
          <template v-for="item in handleLineWrap(dataSource?.seriesName)" :key="item">
            <div>{{ item }}</div>
          </template>
        </div>
      </div>
    </div>
    <div class="body">
      <div class="flex items-center justify-between item-cell">
        <div class="color-gray mr-1" style="width: 50%">总收益</div>
        <div class="color-black text-price text-right" style="width: 50%">{{ formatNumber(dataSource?.data?.totalProfitAmount) }}元</div>
      </div>
      <div class="flex items-center justify-between item-cell">
        <div class="color-gray mr-1" style="width: 50%">总收入</div>
        <div class="color-black text-price text-right" style="width: 50%">{{ formatNumber(dataSource?.data?.totalRevenueAmount) }}元</div>
      </div>
      <div class="flex items-center justify-between item-cell">
        <div class="color-gray mr-1" style="width: 50%">总支出</div>
        <div class="color-black text-price text-right" style="width: 50%">
          {{ formatNumber(dataSource?.data?.totalExpenditureAmount) }}元
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { formatNumber } from '@/utils'

  defineProps({
    dataSource: {
      type: Object,
      default: () => ({}),
    },
  })

  const handleLineWrap = (name: string) => {
    let result: any[] = []
    if (name && name.length > 15) {
      for (let i = 0; i < name.length; i++) {
        if (i % 15 == 0) {
          result.push(name.slice(i, i + 15))
        }
      }
    } else {
      result.push(name)
    }
    return result
  }
</script>
<style lang="less" scoped>
  .echarts-table {
    min-width: 218px;
    padding: 8px 8px;
    background: linear-gradient(304.17deg, rgba(253, 254, 255, 0.6) -6.04%, rgba(244, 247, 252, 0.6) 85.2%);
    border-image: linear-gradient(337deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 1 1;
  }

  .color-black {
    color: #1d2129;
  }

  .color-gray {
    color: #4e5969;
  }

  .item-cell {
    min-height: 32px;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 6px 0px 20px 0px rgba(34, 87, 188, 0.1);
    border-radius: 4px;
    padding: 6px 10px;
    margin-bottom: 2px;

    &:last-child {
      margin-bottom: 0;
    }
  }
</style>
